<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-01-28 18:19:35
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-03 22:01:21
 * @FilePath: \ycq\ycq1.0\src\pages\register\register.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-01-28 18:19:35
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-03 21:10:57
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\register\register.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="wrap">
    <div class="exit">
      <LeftOutlined style="color: #2e2e2e" />
      <a href="/"><span class="txt">返回首页</span></a>
    </div>
    <div class="title"><span class="preTitle">悦</span> 猫 圈</div>
    <!-- 注册表单 -->
    <a-form
      :model="formState"
      name="normal_login"
      class="login-form"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
      style="width: 360px; position: relative; left: 36%"
      ref="formRef"
      :rules="rules"
    >
      <a-form-item>
        <a-lable style="position: relative; top: 15px; color: #999"
          >注册账号</a-lable
        >
      </a-form-item>
      <a-form-item name="phone">
        <a-input v-model:value="formState.phone" placeholder="电话号码">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item name="userPassword">
        <a-input-password
          v-model:value="formState.userPassword"
          placeholder="密码"
        >
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item name="userPasswordOk">
        <a-input-password
          v-model:value="formState.userPasswordOk"
          placeholder="确认密码"
        >
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>
      <!-- 验证码 -->
      <div class="code">
        <a-form-item name="vCode"
          ><a-input
            v-model:value="vCode"
            placeholder="确输入验证码"
            class="codeText"
            style=""
          ></a-input
        ></a-form-item>

        <VerificationCode
          style="
            position: relative;
            top: -35px;
            left: 220px;
            width: 120px;
            height: 40px;
          "
          @handleTxt="handleTxt"
          ref="codeDom"
        />
      </div>
      <!-- <div class="codeErr" ref="codeErrRef">请输入正确的验证码</div> -->
      <a-form-item>
        <button html-type="submit" class="login-form-button" style="left: 30%">
          注&nbsp;册
        </button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { LeftOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";
import VerificationCode from "@/components/canvas/verificationCode.vue";
import { register } from "@/service/api.js";
import { message } from "ant-design-vue";
const formState = ref({
  phone: "",
  userPassword: "",
  userPasswordOk: "",
  remember: true,
});
// 正确验证码
const txt = ref("");
// 输入验证码
const vCode = ref("");
// const codeErrRef = ref(null);
//验证码
const codeDom = ref(null);
//表单dom
const formRef = ref(null);
const closeModal = () => {
  vCode.value = "";
  formState.value = {};
  formRef.value.resetFields(); //清除校验红标
};
const onFinish = async (values) => {
  console.log("Success:", values);
  // 通过校验
  formRef.value
    .validate()
    .then(async () => {
      // 两次输入密码一致
      if (formState.value.userPassword === formState.value.userPasswordOk) {
        // 验证码输入正确--不区分大小写比较

        // 注册账号
        const res = await register({
          phone: formState.value.phone,
          userPassword: formState.value.userPassword,
        });
        console.log(res);
        if (res.code === 1) {
          //注册成功

          formState.value = {};
          codeDom.value.draw();
          message.success("注册成功");

          closeModal();
        } else if (res.code === 401) {
          formState.value = {};
          message.error(res.msg);
        } else message.error("注册失败");
      }
    })
    .catch((error) => {});
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
  vCode.value = "";
  codeDom.value.draw();
};
// 判断验证码输入是否正确
const handleTxt = (txet) => {
  txt.value = txet;
};
// 电话校验
const validatorUserPhone = (rule, value) => {
  if (!/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(value)) {
    return Promise.reject("请输入正确格式的手机号！");
  } else {
    return Promise.resolve();
  }
};
// 密码校验
const validatorUserPwd = (rule, value) => {
  if (!value) {
    return Promise.reject("请输入密码");
  }
  if (
    !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
      value
    )
  ) {
    return Promise.reject(
      "请输入6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种"
    );
  } else {
    return Promise.resolve();
  }
};
// 确认密码校验
const validatorUserPwdOk = (rule, value) => {
  const floor = formState.value.userPassword === formState.value.userPasswordOk;
  if (!value) {
    return Promise.reject("请输入密码");
  }
  if (
    !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
      value
    )
  ) {
    return Promise.reject(
      "请输入6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种"
    );
  } else if (!floor) {
    return Promise.reject("两次输入密码不同");
  } else {
    return Promise.resolve();
  }
};
// 验证码校验
const validatorvVCode = (rule, value) => {
  if (vCode.value.toLowerCase() !== txt.value.toLowerCase()) {
    return Promise.reject("请输入正确的验证码");
  } else return Promise.resolve();
};
// 校验规则
const rules = {
  phone: [{ validator: validatorUserPhone, required: true }],
  userPassword: [{ required: true, validator: validatorUserPwd }],
  userPasswordOk: [{ required: true, validator: validatorUserPwdOk }],
  vCode: [{ required: true, validator: validatorvVCode }],
};
</script>
<style scoped>
.codeErr {
  display: none;
  position: relative;
  top: -28px;
  color: #ff4d4f;
  font-size: 14px;
}
.exit {
  margin: 10px;
  padding: 10px;
}
.exit .txt {
  margin: 5px;
  font-size: 14px;
  color: #999;
}
.title {
  position: relative;
  left: 45%;
  font-size: 35px;
  color: transparent;
  background-color: #333333;
  text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
    rgba(255, 255, 255, 0.2) 1px 3px 3px;
  -webkit-background-clip: text;
}
.preTitle {
  font-size: 35px;
  color: transparent;
  background-color: #ff6347;
  text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
    rgba(255, 255, 255, 0.2) 1px 3px 3px;
  -webkit-background-clip: text;
}

.codeText {
  width: 130px;
}
.ant-btn-primary {
  color: #fff;
  background-color: #ff6347;
  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
.login-form-button {
  font-size: 16px;
  font-weight: 600;
  border-radius: 5px;
  width: 40%;
  border: none;
  color: #999;
  position: relative;
  left: 30%;
}
.login-form-button:hover {
  font-size: 16px;
  color: #ff6347;
  /* background-color: #ff6347; */
}
.ant-form {
  margin: 50px 20px 30px 20px;
  padding: 5px 10px;
}
</style>
